import { useUnit } from "effector-react";

import { $hubInfo } from "store";

const HubInfo = () => {
  const hubInfo = useUnit($hubInfo);

  return (
    <div className="flex flex-row gap-2 content-center ">
      <div className="flex-none">Hub:</div>
      <div className="shrink">
        <div className="flex flex-row gap-2 content-center ">
          {!hubInfo ? (
            <>
              <div className="flex-none badge badge-error">недоступен</div>
              <div className="shrink badge badge-error">
                Проверьте состояние сервера и подключение хаба
              </div>
            </>
          ) : (
            <>
              <div>
                Vendor: <div className="badge badge-success">{hubInfo.manufacturer}</div>
              </div>
              <div>
                COM: <div className="badge badge-success">{hubInfo.path}</div>
              </div>
              <div>
                s/n: <div className="badge badge-success">{hubInfo.serialNumber}</div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default HubInfo;
